<template>
  <div id="educationnewsPage" v-loading="loading">
    <div v-if="listType == 1">
      <div v-if="dataList.length > 0">
        <div class="list">
          <el-row :gutter="20">
            <el-col :span="6" v-for="(item, i) in dataList" :key="i">
              <div class="edu-li" @click="toDetail(item)">
                <img :src="allDataList" />
                <div class="shoad">
                  <p>{{ item.name }}</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div v-else>
        <el-empty description="暂无数据"></el-empty>
      </div>
    </div>
    <div v-if="listType == 2">
      <!-- <p class="clearfix"> <el-button class="fr" type="custom" @click="toback()" plain >返回上一页</el-button></p> -->
      <div class="newsDetail">
        <div class="toptit-img clearfix">
          <div class="fl f-img">
            <div class="edu-li">
              <img :src="allDataList" />
              <div class="shoad">
                <p>{{ title }}</p>
              </div>
            </div>
          </div>
          <div class="fl f-text">
            <p class="title" :style="detailSwitch ? '' : 'margin-top:20px;'">
              {{ title }}
            </p>
            <template v-if="detailSwitch">
              <div class="content-box">
                <div class="content-ico">
                  <p>基本含义</p>
                </div>
              </div>
              <div class="text four-ellipsis" v-html="content" v-if="content">
                {{ content }}
              </div>
              <div v-else class="text">
                <p>暂无数据</p>
              </div>
            </template>
          </div>
        </div>
        <div class="politicalList">
          <politicalHot></politicalHot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  openApiSysIdeologicalEducationQueryId,
  openApiSysIdeologicalEducationQuery,
} from '@/api/openApi'
import politicalHot from '../../advancedSearch/politicalHot.vue'
import Bus from '@/utils/bus.js'
export default {
  components: { politicalHot },
  data() {
    return {
      dataList: [],
      dataPage: {},
      result: {},
      currentPage4: 0,
      listQuery: {
        //首页图数据源查询条件
        page: 1,
        limit: 15,
        id: '',
      },
      pageObj: {},
      listType: '1',
      content: '',
      title: '',
      allDataList: [],
      loading: true,
      detailSwitch: false,
    }
  },
  watch: {
    listType(val) {
      // this.listType=val;
    },
    $route(to, from) {
      // this.listType =this.$route.query.listType;
    },
  },
  mounted() {
    window.scrollTo(0, 0)
    Bus.$on('showEducation', (v) => {
      this.listQuery.id = v.id
      this.listType = v.type
      this.getList()
      this.getReviewType()
    })
  },
  beforeDestroy() {
    Bus.$off('showEducation')
  },
  methods: {
    getList() {
      this.loading = true
      if (this.listType == 1) {
        openApiSysIdeologicalEducationQuery(this.listQuery).then((res) => {
          this.allDataList = this.coverEduImg(res.data.data[0].sysAttachment)
          this.dataList = res.data.data[0].childList
          this.loading = false
        })
      }

      if (this.listType == 2) {
        openApiSysIdeologicalEducationQueryId(this.listQuery.id).then((res) => {
          this.allDataList = this.coverEduImg(res.data.data[0].sysAttachment)
          this.content = res.data.data[0].content
          this.title = res.data.data[0].name
          this.loading = false
        })
      }
    },
    toDetail(item) {
      // if (!this.detailSwitch) return;
      var data = {
        name: '1',
        cName: '1',
        childName: item.name,
        childId: item.id,
        childList: undefined,
      }

      this.$store.commit('SETPOLITICAL', data)
      this.listType = 2
      this.content = item.content
      this.title = item.name
    },
    toback() {
      this.listType = 1
    },
    coverEduImg(v) {
      if (v && v.hasOwnProperty('httpUrl')) {
        return v.httpUrl
      } else {
        return this.$store.getters.defaultEducationImg
      }
    },
    //思政详情开关
    async getReviewType() {
      let res = await this.$store.dispatch(
        'getDictionaryVal',
        'EDUCATION_DETAIL',
      )
      this.detailSwitch = res[0] == 1
    },
  },
}
</script>

<style lang="scss" scoped>
#educationnewsPage {
  // border-top: 1px solid #b60303;
  width: 1000px;
  margin: 0 auto;

  .list {
    font-size: 16px;
    p {
      //   border-bottom: 1px solid #ccc;
      //   padding: 15px;
      cursor: pointer;
    }
    i {
      font-size: 24px;
      color: #b60303;
      vertical-align: -3px;
    }
    .fr {
      height: 24px;
      line-height: 24px;
    }
    .el-icon-v {
      display: inline-block;
      background: url(../../../../assets/training/rl.png) no-repeat left;
      background-size: 100% 100%;
      width: 12px;
      height: 15px;
      margin-right: 9px;
      margin-top: 4px;
    }
    .title {
      padding-left: 20px;
    }
  }
  .pagination {
    padding-top: 30px;
  }

  .newsDetail {
    .title {
      font-size: 28px;
      font-weight: 900;
      text-align: center;
      line-height: 1.5;
      padding: 10px 0;
      color: #a7201f;
      border-bottom: 1px solid #ccc;
    }
    .subTitle {
      text-align: center;
      font-size: 16px;
      padding: 15px 0;
    }
    .title-detail {
      text-align: center;
      span {
        display: inline-block;
        padding-right: 30px;
        color: #909399;
        font-size: 12px;
      }
      border-bottom: 1px dashed #ddd;
      margin: 10px 25px;
      padding-bottom: 20px;
    }
    .text {
      text-indent: 2em;
      margin-top: 10px;
    }
  }
  .edu-li {
    width: 100%;
    overflow: hidden;
    height: 0;
    padding-bottom: 66%;
    // height: 176px;
    margin-bottom: 20px;
    position: relative;
    border-radius: 5px;
    .shoad {
      position: absolute;
      left: 0%;
      top: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      border: 1px solid #eee;
      box-sizing: border-box;
      background: url('~@/assets/home/bg04.png') no-repeat center;
      background-size: cover;
      p {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 90%;
        line-height: 34px;
        font-size: 32px;
        font-weight: 700;
        text-align: center;
        color: #e76c3b;
        text-shadow: #fff 2px 0 0, #fff 0 2px 0, #fff -2px 0 0, #fff 0 -2px 0;
        line-height: 32px;
        font-size: 24px;
      }
    }
    img {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }
  }
  .toptit-img.clearfix {
    .f-img {
      width: 300px;
      border-radius: 0;
      img {
        width: 100%;
        border-radius: 0;
      }
    }
    .f-text {
      float: right;
      width: 680px;
      .title {
        text-align: left;
        // padding-left: 20px;
      }
    }
  }
  .content-box {
    position: relative;
  }
  .content-ico {
    width: 10px;
    color: #fff;
    padding-top: 15px;

    left: 0;
    padding-left: 78px;
    border-bottom: 30px solid #a7201f;
    border-right: 30px solid transparent;
    p {
      position: absolute;
      left: 12px;
      top: 20px;
    }
  }
}
@media screen and (max-width: 1400px) {
  #educationnewsPage {
    width: 800px;
    margin: 0;
  }

  #educationnewsPage .toptit-img.clearfix .f-text {
    width: 480px;
  }
}
</style>